<template>
	<view class="mine">	
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">我的</block>
		</cu-custom>			
		<wx-auth></wx-auth>
		<view :class="['list', usersModel.style.active]">
			<view :class="['item', { order: item.name === '我的订单' && usersModel.style.active === 'style-1' }]" v-for="(item, index) in list" :key="index">
				<view @tap="getMine(item.id)" v-if="item.id !== 21">
					<image :src="item.url"></image>
					<text>{{ item.name }}</text>
					<text v-if="item.name === '我的订单' && usersModel.style.active === 'style-1'">查看全部订单</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button type="primary" open-type="contact" v-if="item.id === 21">
					<image :src="item.url"></image>
					<text>{{ item.name }}</text>
					<text v-if="item.name === '我的订单' && usersModel.style.active === 'style-1'">查看全部订单</text>					
				</button>				
				<!-- #endif -->
				<view v-if="item.name === '我的订单' && usersModel.style.active === 'style-1'">
					<navigator hover-class="none" url="/pages/orders/list?act=2">
						<image src="/static/waitPay.png" class="icon"></image>
						<view class="text">待付款</view>
					</navigator>
					<navigator hover-class="none" url="/pages/orders/list?act=3">
						<image src="/static/waitSend.png" class="icon"></image>
						<view class="text">待发货</view>
					</navigator>
					<navigator hover-class="none" url="/pages/orders/list?act=4">
						<image src="/static/waitRecive.png" class="icon"></image>
						<view class="text">待收货</view>
					</navigator>
					<navigator hover-class="none" url="/pages/orders/list?act=5">
						<image src="/static/orderCom.png" class="icon"></image>
						<view class="text">待评价</view>
					</navigator>															
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="item about">
				<navigator url="/usercenter/about" hover-class="none">
					<image src="/static/about.png"></image>
					<text>关于</text>
				</navigator>
			</view>
			<view :class="[ 'item', { login: !userInfo, logout: userInfo} ]">
				<block v-if="userInfo"><view @tap="$store.dispatch('logout')">退出登录</view></block>
				<block v-else><navigator url="/pages/login/index" hover-class="none"><image src="/static/login.png" mode=""></image><view>登录</view></navigator></block>
			</view>			
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'mine',
		computed: {
			...mapGetters([
				'usersModel',
				'userInfo',
				'shop'
			]),
			list () {
				return this.usersModel.limit_list.filter(item => {
					item.name === '分销中心' ? item.name = '推广中心' : ''
					// #ifdef MP-WEIXIN
					return item
					// #endif
					return item.id !== 21
				})
			}
		},
		onShow() {
			if (this.userInfo) {
				if (!this.userInfo.phone && this.shop.bind_mobile) {
					uni.showModal({
						content: '您还没有绑定手机号码',
						confirmText: '去绑定',
						success: rst => {
							if (rst.confirm) {
								uni.navigateTo({
									url: '/usercenter/editdata'
								})
							}
						}
					})
				}
			}
		},
		methods: {
			getMine (id) {
				if (!this.userInfo) {
					// #ifndef MP-WEIXIN
					uni.navigateTo({ url: '/pages/login/index' })
					// #endif
					return
				}
				switch (id) {
					case 15:
					uni.navigateTo({ url: '/pages/orders/list?act=1' })
					break;
					case 16:
					uni.navigateTo({ url: '/usercenter/footprint' })
					break;
					case 17:
					uni.navigateTo({ url: '/usercenter/favorite' })
					break;
					case 18:
					uni.navigateTo({ url: '/usercenter/address' })
					break;
					case 19:
					uni.navigateTo({ url: '/assets/index' })
					break;
					case 20:
					uni.navigateTo({ url: '/usercenter/editdata' })
					break;
					case 21:
					console.log(222)
					break;
					case 22:
					uni.navigateTo({ url: '/pages/spree/invite' })
					break;
					case 105:
					uni.navigateTo({ url: '/pages/spree/mygive' })
					break;
					case 114:
					uni.navigateTo({ url: '/usercenter/distribution' })
					break;
					case 106:
					uni.navigateTo({ url: '/usercenter/myprivilege' })
					break;
					case 107:
					uni.navigateTo({ url: '/usercenter/assemble' })
					break;
					case 115:
					uni.navigateTo({ url: '/usercenter/assemble' })
					break;					
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.mine {
	padding-bottom: 30upx;
	overflow: hidden;
	.list {
		button {
			background-color: white;
			appearance: none;
			border: none;
			border-radius: 0;
			border: 0 none;
			color: #000;
			&::after {
				top: auto;
				border: 0 none;
			}
		}
		&.style-1 {
			.item {
				background-color:white;		
				& > navigator, & > view:nth-of-type(1), & > button {
					padding: 0 30upx 0 85upx;
					height: @height;
					display:flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					image {
						width: 40upx;
						height: 40upx;
						position: absolute;
						left: 30upx;
						top: 50%;
						transform: translate3d(0, -50%, 0);
					}
					.arrowRight;	
					.border-bottom(70upx);
					& > text {
						&:nth-of-type(2) {
							padding-right: 30upx;
							color:@gray;
						}
					}
				}
				& > view:nth-of-type(2) {
					display: flex;
					align-items: center;
					justify-content:center;
					padding: 20upx 0;
					overflow:hidden;
					& > navigator{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content:center;
						flex-direction: column;
						flex-flow: column;
						& > .icon {
							width: 50upx;
							height: 50upx;
						}
						& .text {
							font-size: @minSize;
							
						}
					}
				}		
				&.order {
					margin-bottom:  20upx;
				}
				&.about {
					margin-top: 20upx;
				}
				&.login, &.about {
					image {
						position: absolute;
						width: 40upx;
						height: 40upx;
						display: block;
						left: 30upx;					
					}				
				}
				&.login {
					color:@red;
				}
				&.logout {
					color:@red;
					& > view {
						padding: 0;					
						justify-content: center;
						&::before {
							display: none;
						}					
					}
				}
			}			
		}
		&.style-2 {
			display: flex;
			flex-wrap: wrap;
			background-color: white;
			.item {
				width: 33.333%;
				padding: 15upx 0;
				& > view, & > navigator,  & > button {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				flex-flow: column;
				image {
						display: block;
						width: 65upx;
						height: 65upx;
					}
				text {
					 font-size: @medium;
					 padding-top: 10upx;
				   }	
				}
				&.about {
					border-top: 20upx solid #f4f4f4;
					.border-bottom(70upx);
				}
				&.about, &.login {
					.arrowRight(#666, 0, 15upx);
					width: 100%;
					padding: 0;					
					& > view, & > navigator {
						padding: 0 30upx 0 85upx;
						height: @height;
						display:flex;
						align-items: center;
						justify-content: flex-start;
						flex-direction: inherit;
						flex-flow: inherit;
						position: relative;
						image {
							width: 40upx;
							height: 40upx;
							position: absolute;
							left: 30upx;
							top: 50%;
							transform: translate3d(0, -50%, 0);
						}						
					}
				}
				&.logout {
					width: 100%;
					color:@red;				
				}
			}
		}
	}	
}
</style>
